<template>
  <div>
    <ul>
     <li v-for="m in messageList" :key="m.id">
        <!--1 跳转路由并携带query参数，to的字符串写法。！！！！注意to要绑定 :to -->
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.mes}`">{{ m.title }}</router-link>

        <!--2 跳转路由并携带query参数，to的对象写法 -->
      <!--   <router-link :to="{
            // path:'/home/message/detail',
           name:'xiangqing',
            query:{
                id:m.id,
                title:m.mes
            }
        }">{{ m.title }}</router-link><br> -->

        <!--3/4携带params参数 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.mes}`">{{ m.title }}</router-link><br> -->
     <!--    <router-link :to="{
           name:'xiangqing',//这里携带params参数，只能用name,不能用path
            params:{
                id:m.id,
                title:m.mes
            }
        }">{{ m.title }}</router-link><br> -->
        <button @click="pushShow(m)">push查看</button>
        <button @click="replaceShow(m)">repalce查看</button>
    </li>
    </ul>  
    <hr> 
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name:'Message',
data(){
    return {
        messageList:[
            {id:'001',title:'消息001',mes:'我喜欢你'},
            {id:'002',title:'消息002',mes:'这是真的'},
            {id:'003',title:'消息003',mes:'哦哦哦！'}
        ],
        mas:'sjsjj'
    }
},
methods:{
    pushShow(m){
        this.$router.push({
            name:'xiangqing',
            query:{
                id:m.id,
                title:m.title
            }
        })
    },
    replaceShow(m){
        this.$router.replace({
            name:'xiangqing',
            query:{
                id:m.id,
                title:m.title
            }
        })
    }
}
}
</script>
